文章將陸續整理並更新至個人部落格。

在上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的概念，今天將介紹 flex-wrap、flex-flow 與 order 三個屬性。

flex-wrap 屬性

flex-wrap 屬性適用於 flex container，有 nowrap、wrap 與 wrap-reverse 三種屬性值。接下來分別說明三種屬性值的意義。

摘自 W3C

註：display 為 flex 或 inline-flex 元素為 flex container，而其子元素稱為 flex item。

nowrap

flex-wrap: nowrap;

• 預設值，單行，不換行。

wrap

flex-wrap: wrap;

• 可換行，由 cross start 開始向 cross end 堆疊。

wrap-reverse

flex-wrap: wrap-reverse;

• 可換行，由 cross end 開始向 cross start 堆疊。

flex-flow 屬性

flex-direction 屬性與 flex-wrap 屬性的縮寫。

例 1

flex-flow: row wrap;

上式等同於

flex-direction: row;   /* 預設值 */
flex-wrap: wrap;

例 2

flex-flow: row-reverse wrap-reverse;

上式等同於

flex-direction: row-reverse;
flex-wrap: wrap-reverse;

order 屬性

order 屬性可以控制 flex items 的順序，僅適用於 flex items，屬性值須為整數(可為負數)。

摘自 W3C

註： flex items 的 order 預設下皆為 0。

flex items 會從序號最小的開始排序，直接看圖比較快～
例如在書寫方向為橫式且由左至右的前提下，

若主軸(main axis)為 row，即 flex-direction: row 的 flex container，其子元素(flex items)的排列順序會依照其 order 序號由左至右排序。

• 1 < 3 < 4

• -5 < -2 < 4 < 8

若主軸(main axis)為 column，即 flex-direction: column 的 flex container，其子元素(flex items)的排列順序會依照其 order 序號由上至下排序。

• 1 < 3 < 4

• -10 < 4 < 7 < 13

今天就先簡單介紹 flex-wrap、flex-flow 與 order 三個屬性～
明天見拉，bye~

還在持續看 flex 規範中～ 或許看完之後會再重新整理一次文章～

參考資料

W3C-CSS Flexible Box Layout Module Level 1